<template>
	<div>
		<canvas width="200" height="200" id="canvas"	ref="canvas"></canvas>
	</div>
</template>
<script type="text/javascript">
	import { Game, GameObject, resource, RESOURCE_TYPE, LOAD_EVENT	} from '@eva/eva.js'
	import { RendererSystem } from '@eva/plugin-renderer'
	import { SpriteAnimation, SpriteAnimationSystem } from '@eva/plugin-renderer-sprite-animation'
	export default{
		name: 'EvajsStudyShowSpriteAnimation',
		data(){
			return {
				percent: 0,
				game: null
			}
		},
		created(){
			this.$nextTick(()=>{
				this.loadResource()
			})
		},
		destroyed(){
			if(this.game){
				this.game.destroy()
			}
		},
		methods:{
			loadResource(){
				resource.addResource([
					{
						name: 'fruit',
						type: RESOURCE_TYPE.SPRITE_ANIMATION,
						src: {
							image: {
								type: 'png',
								url: '/images/TB15pMkkrsTMeJjSszhXXcGCFXa-377-1070.png'
							},
							json: {
								type: 'json',
								url: '/json/TB1qCvumsyYBuNkSnfoXXcWgVXa.json'
							}
						},
						preload: true
					}
				]);
				resource.preload();
				// 开始loader
				resource.on(LOAD_EVENT.START, e => {
					console.log('开始加载', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.PROGRESS, e => {
					console.log('进度监听', e);
				}); 
				// 某文件加载成功
				resource.on(LOAD_EVENT.LOADED, e => {
					console.log('某文件加载成功', e);
				}); 
				// 加载进度更新
				resource.on(LOAD_EVENT.COMPLETE, e => {
					console.log('完成', e);
					this.showSpriteAnimation()
				}); 
				// 加载错误
				resource.on(LOAD_EVENT.ERROR, e => {
					console.log('错误', e);
				}); 
			},
			showSpriteAnimation(){
				// 创建游戏
				this.game = new Game({
					systems: [ // 游戏添加渲染系统
						new RendererSystem({
							canvas: this.$refs.canvas,
							width: 750,
							height: 1000,
							backgroundColor: 0x101010
						}),
						// 游戏精灵系统
						new SpriteAnimationSystem(),
					],
				});
				const cut = new GameObject('cut', {
					position: { x: 225, y: 400 },
					size: { width: 300, height: 200 },
					origin: { x: 0, y: 0 }
				})

				const frame = cut.addComponent(
					new SpriteAnimation({
						resource: 'fruit',
						speed: 100
					})
				)

				frame.play()

				this.game.scene.addChild(cut)
			}
		}
	}
</script>